<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
      <el-row type="flex" justify="center">
      <el-col :span="5">
          <el-form-item prop="username">
            <!-- v-model="ruleForm.username" 双向数据绑定 -->
          <el-input type="text" placeholder="用户名" required="required" v-model="ruleForm.username" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
      </el-col>
      </el-row>
       <el-row type="flex" justify="center">
       <el-col :span="5">
          <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
       </el-col>
       </el-row>
              <el-row type="flex" justify="center">
       <el-col :span="5">
          <el-form-item prop="email" >
          <el-input type="email" placeholder="请输入邮箱" v-model="ruleForm.email" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
       </el-col>
       </el-row>
       <el-row type="flex" justify="center">
     <el-col :span="3">
     <el-form-item prop="code">
     <el-input  type="code" placeholder="请输入验证码"  v-model="ruleForm.code" prefix-icon="el-icon-lock"></el-input>
     </el-form-item>
 </el-col>
 <el-image :src=beginSrc alt="验证码" style="cursor: pointer"  @click="changeCheckCode()" >
 </el-image>
 </el-row>
      <el-row type="flex" justify="center">
      <el-col :span="5">
          <el-form-item class="btn-form">
            <!-- 单击事件，调用submitForm函数 -->
          <el-button type="primary" @click="submitForm('ruleForm')">注册</el-button>
          <el-button type="primary"><a href="#/login" target="_self">登录</a></el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
       </el-col>
       </el-row>
  </el-form>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        email:'',
        code:""
      },
      beginSrc:'/checkCodeServlet',
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
                email: [
                    {required: true, message: '请填写', trigger: 'blur'},
                    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}
                ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //TODO:向后台发送异步请求，携带请求数据完成注册&code=${this.ruleForm.code}
          axios.post("/registerServlet",`username=${this.ruleForm.username}&password=${this.ruleForm.password}&email=${this.ruleForm.email}&code=${this.ruleForm.code}`)
               .then(resp=>{
                  console.log(resp.data);
                  //1.判断
                  if(resp.data.flag){
                      //2.说明注册成功，跳转到登录页面 这里必须加#
                      location.href="#/login";
                      this.$notify({
                                    title: resp.data.message,
                                    message: '那你呢 除了知道我是宇宙最强最潮流最帅最牛超级无敌邪魅嗜血究极狂暴螺旋升天帅暗影少帅 你又了解我多少',
                                    position: 'bottom-left'
                                    });
                  }else{
                      //3.注册失败，提示信息
                           this.$notify({
                                    title: resp.data.message,
                                    message: '那你呢 除了知道我是宇宙最强最潮流最帅最牛超级无敌邪魅嗜血究极狂暴螺旋升天帅暗影少帅 你又了解我多少',
                                    position: 'bottom-left'
                                    });
                  }
               });
        } else {
           //表单校验失败
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
    ,
    changeCheckCode() {
       this.beginSrc= "/checkCodeServlet?t="+new Date().getTime();
    }
  }
}


</script>
  
<style>

</style>